* {
    margin: 0;
    padding: 0;
}

body {
    /* 页面垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2;
}

.box {
    /* 子元素绝对定位，父元素要相对定位才有用 */
    position: relative;
    width: 300px;
    height: 300px;
    cursor: pointer;
    /* 添加3d视角 */
    transform-style: preserve-3d;
    /* 添加动画效果 */
    animation: rotate-reverse 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.box:hover {
    /* transform: rotateY(180deg); */
    /* cubic-bezier(0.68, -0.55, 0.27, 1.55)缓冲回弹效果 */
    animation: rotate 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: pink;
    border-radius: 50%;
    line-height: 300px;
    text-align: center;
    font-size: 32px;
    color: #fff;
    /* 隐藏元素背面 */
    backface-visibility: hidden;
}

.back {
    background-color: skyblue;
    transform: rotateY(180deg);
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

@keyframes rotate-reverse {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}